import { useState } from 'react'
import Codepensvg from '@/utils/Codepensvg'
import Copysvg from '@/utils/Copysvg'
import { Pagination } from 'ygbh'
import classNames from 'classnames';

function Demo(props:any) {
	const codeUrl = 'https://codepen.io/xiebaolin/pen/PoKGBRR';
	const codeVal = `
	import { Pagination } from 'ygbh';
	const onChange = (page:number, pageSize:number) => {
		console.log(page, pageSize);
	}
	ReactDOM.render(
	  <>
	    <div>
		<Pagination defaultCurrent={2} total={50}></Pagination>
		<Pagination current={3} total={50}></Pagination>
	    </div>
	  </>,
	  mountNode,
	);
	`;
	//实例-start
	const [showCoreFlag, setShowCoreFlag] = useState(false);
	
	const classString = classNames('source-case-mod', {
		'show-case-core': showCoreFlag,
	});
	const toggleCoreFlag = () => {
		setShowCoreFlag(!showCoreFlag);
	};
	const copyCaseFn = () => {
		let input:any = document.getElementById("globalInputCopy");
		input.value = codeVal; // 修改文本框的内容
		input.select(); // 选中文本
		document.execCommand("copy");
		input = null;
		alert('复制成功');
	};
	const onChange = (page:number, pageSize:number) => {
		console.log(page, pageSize);
	}
	return (<div className="demo-block">
	    <section className={classString}>
	        <section className="code-box-demo">
	            <div>
					<Pagination defaultCurrent={2} total={50}></Pagination>
					<Pagination current={3} total={50}></Pagination>
				</div>
	        </section>
	        <section className="code-box-meta">
	            <div className="code-box-title">基本</div>
	            <div className="code-box-description">基本的用法。</div>
	            <div className="code-box-actions">
	            	<a href={codeUrl} className="code-box-code-action code-box-code-action1" target='_blank' title='在 CodePen 中打开'>
	            		<Codepensvg></Codepensvg>
	            	</a>
	            	<span className="code-box-code-action code-box-code-action2" title='复制代码' onClick={copyCaseFn}>
	            	    <Copysvg></Copysvg>
	            	</span>
	            	<span className="code-box-code-action code-box-code-action3" title='显示代码' onClick={toggleCoreFlag}></span>
	            </div>
	        </section>
	        <section className="highlight-wrapper">
	            <textarea className="demo-core-box" style={{height: '250px'}} readOnly={true} defaultValue={codeVal}></textarea>
	        </section>
		</section>
	</div>);
}

export default Demo
